<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>渐变效果</title>
	<style type="text/css">
		.box{ width:100px;
		          height:100px; 
		          position:relative;
		          background: #000;
		}
		.box1{
			width:0; 
			height:100%; 
			position:absolute; 
			left:0; 
			top:0;
		}
		.box:hover .box1{
			transition:1s; 
			width:100%;
			background: red;
		}
	</style>
</head>
<body>
	<div class="box"><div class="box1" ></div></div>
</body>
</html>